// 给tbody绑定事件，使用群组选择器，可以避免给tbody绑定多个事件
$('#shop-tbody').on('click', '.btn-customize-edit,.btn-customize-del,.btn-customize-sure,.btn-customize-cancel', function () {
    // 通过parents方法找到按钮的祖先元素tr
    const $tr = $(this).parents('tr');
    // console.log($(this))  // this即事件源
    // hasClass()可以判断匹配元素中是否有相应的类名---jQuery方法
    if ($(this).hasClass('btn-customize-edit')) {
        // 编辑按钮
        $tr.addClass('dis-customize-non').find('span').each(function () {
            // console.log($(this))  // 此时的this指向找到的span
            // next()方法指匹配元素的下一个元素
            // val()方法修改元素的value值
            $(this).next().val($(this).html());
        });
    } else if ($(this).hasClass('btn-customize-del')) {
        const id = $tr.data('id');
        // 删除按钮
        $.ajax({
            method: 'GET',
            url: 'api/shop/del.php',
            data: { id },
            beforeSend: function () {
                // 在发送请求之前，弹窗判断一次
                return confirm('确定删除此条数据吗？');
            },
            success: function (resp) {
                // 删除成功，重新请求一次数据
                if (resp.code === 200) {
                    console.log(resp.body.msg)
                    getData()
                }
            },
            error: function (resp) {
                alert(resp.body.msg)
            },
            dataType: 'json'
        })
        
    } else if ($(this).is('.btn-customize-sure')){
        // 确定按钮
        const id = $tr.data('id');
        const name = $tr.find('.inputName').val();
        const price = $tr.find('.inputPrice').val();
        const num = $tr.find('.inputNum').val();
        const size = $tr.find('.inputSize').val();
        
        $.get('api/shop/update.php', { id, name, price, num, size }, resp => {
            if (resp.code === 200) {
                // 修改成功
                $tr.removeClass('dis-customize-non').find('span').each(function () {
                    $(this).html($(this).next().val());
                })
                console.log(resp)
            } else {
                alert(resp.body.msg);
            }
        }, 'json')

        
    } else if ($(this).is('.btn-customize-cancel')) {
        // 取消按钮
        $tr.removeClass('dis-customize-non')
    }
})